<style lang="less">
	page{
		background: #f6f6f6;
	}
	.tab-h{
	  width: 100%; 
	  background: #ffffff;
	  font-size: 28upx; 
	  position: sticky;
	  top: 0; 
	  left: 0;
	  z-index: 99;
	  text-align: center;
		.tab-item{
			padding: 20upx 0;
			background: none;
			display: inline-block;
			width: 25%;
			.titleNum{
				font-size:30upx;
				font-family:'DINCond';
				font-weight:400;
				color:rgba(51,51,51,1);
				line-height:48upx;
			}
			.titleName{
				font-size:20upx;
				font-weight:500;
				color:rgba(153,153,153,1);
				line-height:29upx;
			}
		}
		.tab-item.active{
			background:rgba(219,194,145,1);
			.titleNum{
				color:rgba(255,255,255,1);
			}
			.titleName{
				color:rgba(255,255,255,1);
			}
		}
		.tab-bot{
			margin-top: 5upx;
			display: flex;
			.list-tab-item{
				width: 33.33%;
				padding: 20upx 0;
			}
			.titleNum{
				font-size:30upx;
				font-family:'DINCond';
				font-weight:400;
				color:rgba(51,51,51,1);
				line-height:48upx;
			}
			.titleName{
				font-size:20upx;
				font-weight:500;
				color:rgba(153,153,153,1);
				line-height:29upx;
			}
			.list-tab-item.activeList{
				background:rgba(219,194,145,1);
				.titleNum{
					color:rgba(255,255,255,1);
				}
				.titleName{
					color:rgba(255,255,255,1);
				}
			}
		}
	}
	.content{
		background: #FFFFFF;
		margin-top: 20upx;
	}
    .main_list{
    	padding:20upx;
    }
    .item_list{
    	width: 100%;
    	padding: 20upx 0;
    	border-bottom: 1px solid #EDEDED;
		.item_list_top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.item_list_top_fl{
				display: flex;
				font-size:24upx;
				font-weight:bold;
				align-items: center;
				color:rgba(51,51,51,1);
				line-height:42upx;
				.item_list_top_fl_fr{
					margin-left: 12upx;
					.copy{
						display: inline-block;
						width: 30upx;
						margin-left: 20upx;
						height: auto;
					}
				}
			}
			.item_list_top_fr{
				font-size:34upx;
				font-family:'DINCond';
				font-weight:400;
				color:rgba(233,50,70,1);
			}
		}
		.item_list_bop{
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #999;
			.item_list_bop_fl{
				line-height:42upx;
				display: flex;
				align-items: center;
				font-weight:500;
				.item_list_bop_fl_fl{
					font-size:22upx;
				}
				.item_list_bop_fl_fr{
					margin-left: 12upx;
					font-size:22upx;
				}
			}
			.item_list_bop_fr{
				line-height:42upx;
				font-size:22upx;
			}
		}
    }
	.main_list .item_list:last-child{
		border-bottom: none;
	}
	//点击弹出
	.pos{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 102;
		.pos-bj{
			position: fixed;
			left: 0;
			top: 0;
			background: #000000;
			opacity: 0.3;
			width: 100%;
			height: 100%;
		}
		.pos-centent{
			position: absolute;
			width: 86%;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			background: #FFFFFF;
			border-radius:24upx;
			padding: 30upx 20upx;
			.pos-centent-title{
				text-align: center;
				font-size:34upx;
				font-weight:bold;
				color:rgba(51,51,51,1);
				line-height:41upx;
				margin-bottom: 30upx;
			}
			.pos-centent-list{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10upx 0;
				.dingdan{
					display: flex;
					align-items: center;
					.dingdan-fl{
						font-size:22upx;
						font-weight:500;
						color:rgba(51,51,51,1);
						line-height:30upx;
					}
					.dingdan-fr{
						font-size:22upx;
						font-weight:500;
						color:rgba(51,51,51,1);
						line-height:30upx;
						margin-left: 10upx;
						.copy{
							display: inline-block;
							width: 30upx;
							margin-left: 20upx;
							height: auto;
						}
					}
				}
				.name{
					display: flex;
					align-items: center;
					.name-xm{
						background: url('https://xpandago.oss-cn-shanghai.aliyuncs.com/wechat/images/user%402x.png') left center no-repeat;
						font-size:22upx;
						font-weight:500;
						color:rgba(153,153,153,1);
						line-height:30upx;
						background-size: 24upx;
						padding-left: 40upx;
					}
					.name-jb{
						font-size:22upx;
						font-weight:500;
						color:rgba(153,153,153,1);
						line-height:30upx;
						margin-left: 10upx;
					}
				}
				.jine{
					display: flex;
					align-items: center;
					.jine-fl{
						font-size:22upx;
						font-weight:500;
						color:rgba(153,153,153,1);
						line-height:30upx;
					}
					.jine-fr{
						font-size:22upx;
						font-weight:500;
						color:rgba(153,153,153,1);
						line-height:30upx;
						margin-left: 10upx;
						font-family:'DINCond';
					}
				}
				.shouyi{
					font-size:34upx;
					font-family:'DINCond';
					font-weight:400;
					color:rgba(233,50,70,1);
				}
				.pos-centent-list-fr{
					font-size:22upx;
					font-weight:500;
					color:rgba(153,153,153,1);
				}
			}
		}
		.close{
		  position: absolute;
		  left: 50%;
		  bottom: -80upx;
		  width: 50upx;
		  margin-left: -25upx;
		}
	}
</style>
<template>
	<view>
			<view class="tab-h">
				<view class="tab-top">
					<view class="tab-item" :class="current == 0 ? 'active' : ''" @tap="onClickItem(0)">
						<view class="titleNum">{{dataTop.allBalance}}</view>
						<view class="titleName">总账户</view>
					</view>
					<view class="tab-item" :class="current == 1 ? 'active' : '' || current == 4 ? 'active' : '' || current == 5 ? 'active' : ''" @tap="onClickItem(1)">
						<view class="titleNum">{{dataTop.withdrawBalance}}</view>
						<view class="titleName">可提现</view>
					</view>
					<view class="tab-item" :class="current == 2 ? 'active' : ''" @tap="onClickItem(2)">
						<view class="titleNum">{{dataTop.balanceNo}}</view>
						<view class="titleName">不可提现</view>
					</view>
					<view class="tab-item" :class="current == 3 ? 'active' : ''" @tap="onClickItem(3)">
						<view class="titleNum">{{dataTop.giftAmount}}</view>
						<view class="titleName">充值款余额</view>
					</view>
				</view>
				<view class="tab-bot" v-show="current== 1 ||current == 4 ||current == 5">
					<view class="list-tab-item" :class="currentList == 0 ? 'activeList' : ''" @tap="onClickItem(1)">
						<view class="titleNum">{{dataTop.balance}}</view>
						<view class="titleName">收益账户</view>
					</view>
					<view class="list-tab-item" :class="currentList == 1 ? 'activeList' : ''" @tap="onClickItem(4)">
						<view class="titleNum">{{dataTop.amount}}</view>
						<view class="titleName">充值款提现账户</view>
					</view>
					<view class="list-tab-item" :class="currentList == 2 ? 'activeList' : ''" @tap="onClickItem(5)">
						<view class="titleNum">{{dataTop.teamAward}}</view>
						<view class="titleName">品牌推广补贴账户</view>
					</view>
				</view>
			</view>
			<view class="content">
				<!-- <view v-show="current === 0"> -->
					<view class="main_list">
						<view class="item_list" v-for="(itme,i) in list" @tap="obj(itme)">
							<view class="item_list_top">
								<view class="item_list_top_fl">
									<view class="item_list_top_fl_fl">{{itme.earningsTypeStr}}</view>
									<view class="item_list_top_fl_fr" v-if="itme.orderNo != null && itme.orderNo!=''">{{itme.orderNo}}
										<image src="/static/img/copy_icon@2x.png" class="copy" @tap.stop="copy(itme.orderNo)" mode="widthFix"></image>
									</view>
								</view>
								<view class="item_list_top_fr">{{itme.priceCurrent}}</view>
							</view>
							<view class="item_list_bop">
								<view class="item_list_bop_fl">
									<view class="item_list_bop_fl_fl">账户总金额</view>
									<view class="item_list_bop_fl_fr">{{itme.balanceCurrent}}</view>
								</view>
								<view class="item_list_bop_fr">{{itme.creatTime}}</view>
							</view>
						</view>
					</view>
				<!-- </view> -->
				<!-- <view v-show="current === 1 || current === 4 || current === 5">
					<view class="main_list">
						<view class="item_list" v-for="(itme,i) in listOne" @tap="obj(itme)">
							<view class="item_list_top">
								<view class="item_list_top_fl">
									<view class="item_list_top_fl_fl">{{itme.earningsTypeStr}}</view>
									<view class="item_list_top_fl_fr" v-if="itme.orderNo != null && itme.orderNo!=''">{{itme.orderNo}}
										<image src="/static/img/copy_icon@2x.png" class="copy" @tap.stop="copy(itme.orderNo)" mode="widthFix"></image>
									</view>
								</view>
								<view class="item_list_top_fr">{{itme.priceCurrent}}</view>
							</view>
							<view class="item_list_bop">
								<view class="item_list_bop_fl">
									<view class="item_list_bop_fl_fl">账户总金额</view>
									<view class="item_list_bop_fl_fr">{{itme.balanceCurrent}}</view>
								</view>
								<view class="item_list_bop_fr">{{itme.creatTime}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-show="current === 2">
					<view class="main_list">
						<view class="item_list" v-for="(itme,i) in listTwo" @tap="obj(itme)">
							<view class="item_list_top">
								<view class="item_list_top_fl">
									<view class="item_list_top_fl_fl">{{itme.earningsTypeStr}}</view>
									<view class="item_list_top_fl_fr" v-if="itme.orderNo != null && itme.orderNo!=''">{{itme.orderNo}}
										<image src="/static/img/copy_icon@2x.png" class="copy" @tap.stop="copy(itme.orderNo)" mode="widthFix"></image>
									</view>
								</view>
								<view class="item_list_top_fr">{{itme.priceCurrent}}</view>
							</view>
							<view class="item_list_bop">
								<view class="item_list_bop_fl">
									<view class="item_list_bop_fl_fl">账户总金额</view>
									<view class="item_list_bop_fl_fr">{{itme.balanceCurrent}}</view>
								</view>
								<view class="item_list_bop_fr">{{itme.creatTime}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-show="current === 3">
					<view class="main_list">
						<view class="item_list" v-for="(itme,i) in listThree" @tap="obj(itme)">
							<view class="item_list_top">
								<view class="item_list_top_fl">
									<view class="item_list_top_fl_fl">{{itme.earningsTypeStr}}</view>
									<view class="item_list_top_fl_fr" v-if="itme.orderNo != null && itme.orderNo!=''">{{itme.orderNo}}
										<image src="/static/img/copy_icon@2x.png" class="copy" @tap.stop="copy(itme.orderNo)" mode="widthFix"></image>
									</view>
								</view>
								<view class="item_list_top_fr">{{itme.priceCurrent}}</view>
							</view>
							<view class="item_list_bop">
								<view class="item_list_bop_fl">
									<view class="item_list_bop_fl_fl">账户总金额</view>
									<view class="item_list_bop_fl_fr">{{itme.balanceCurrent}}</view>
								</view>
								<view class="item_list_bop_fr">{{itme.creatTime}}</view>
							</view>
						</view>
					</view>
				</view> -->
				<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
			</view>
			<view class="pos" v-if="isShow==true">
				<view class="pos-bj"></view>
				<view class="pos-centent">
					<view class="pos-centent-title">资金详情</view>
					<view class="pos-centent-list">
						<view class="dingdan">
							<view class="dingdan-fl">{{objItem.earningsTypeStr}}</view>
							<view class="dingdan-fr"  v-if="objItem.orderNo != null && objItem.orderNo!=''">{{objItem.orderNo}}
								<image src="/static/img/copy_icon@2x.png" class="copy" @tap.stop="copy(objItem.orderNo)" mode="widthFix"></image>
							</view>
						</view>
						<view class="pos-centent-list-fr">{{objItem.creatTime}}</view>
					</view>
					<view class="pos-centent-list">
						<view class="name">
							<view class="name-xm">{{objItem.username}}，</view>
							<view class="name-jb">{{objItem.vipClass}}，</view>
							<view class="name-jb">{{objItem.mobile}}</view>
						</view>
						<view class="pos-centent-list-fr">{{objItem.income}}</view>
					</view>
					<view class="pos-centent-list">
						<view class="jine">
							<view class="jine-fl">账户总金额</view>
							<view class="jine-fr">{{objItem.balanceCurrent}}</view>
						</view>
						<view class="shouyi">{{objItem.priceCurrent}}</view>
					</view>
					<image class="close" @tap.stop="closeWd" src="https://static.xpandago.net/wechat/images/closed_boxs%402x.png" mode="widthFix"/>
				</view>
			</view>
	</view>
</template>

<script>
	import api from '@/common/api';
	export default {
		data() {
			return {
				list:[],
				// listOne:[],
				// listTwo:[],
				// listThree:[],
				dataTop:{},
				current: 0,
				currentList:0,
				loadMoreText: "加载中...",
				showLoadMore: false,
				totalPage:'',//总页数
				page:1,
				token:'',
				isShow:false,
				objItem:{},//弹出数据
			}
		},
		onLoad() {
			this.token=uni.getStorageSync('token')
			this.listTop()
		},
		onReachBottom() {
			this.showLoadMore = true;
			if (this.page >= this.totalPage) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}else{
				setTimeout(() => {
					this.page++
					this.newList(this.page)
				}, 500);
			}
		},
		//下拉刷新
		 onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.page=1
			this.newList(this.page)
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		methods: {
			//头部接口
			async listTop(){
				const [err, res] = await api.listTop({
					 header:{
						'Content-Type': 'application/json',
						'token': this.token
					 }
				 });
				 if(res.data.code == 0){
					 this.dataTop=res.data.data
					 this.newList(this.page)
				 }
			},
			//列表
			async newList(page){
				const [err, res] = await api.newList({
					query: {
						page:page,
						type:this.current,
						limit:10
					},
					 header:{
						'Content-Type': 'application/json',
						'token': this.token
					 }
				 });
				 if(res.data.code == 0){
					 this.list = [...this.list, ...res.data.data.list];
					  this.totalPage=res.data.data.totalPage
					  if(this.list.length==0){
					 	  this.loadMoreText = "暂无数据!"
					 	 this.showLoadMore = true;
					 }else{
					 	this.showLoadMore = false; 
					 }
					 // if(this.current==0){
						//  this.list = [...this.list, ...res.data.data.list];
						//  this.totalPage=res.data.data.totalPage
						//  if(this.list.length==0){
						// 	  this.loadMoreText = "暂无数据!"
						// 	 this.showLoadMore = true;
						// }else{
						// 	this.showLoadMore = false; 
						// }
					 // }else if(this.current==1){
						//  this.listOne = [...this.listOne, ...res.data.data.list];
						//  this.totalPage=res.data.data.totalPage
						//  if(this.listOne.length==0){
						// 	  this.loadMoreText = "暂无数据!"
						// 	 this.showLoadMore = true;
						// }else{
						// 	this.showLoadMore = false; 
						// }
					 // }else if(this.current==2){
						//  this.listTwo = [...this.listTwo, ...res.data.data.list];
						//  this.totalPage=res.data.data.totalPage
						//   if(this.listTwo.length==0){
						//  	  this.loadMoreText = "暂无数据!"
						//  	 this.showLoadMore = true;
						//  }else{
						//  	this.showLoadMore = false; 
						//  }
					 // }else{
						//  this.listThree = [...this.listThree, ...res.data.data.list];
						//  this.totalPage=res.data.data.totalPage
						//  if(this.listThree.length==0){
						// 	  this.loadMoreText = "暂无数据!"
						// 	 this.showLoadMore = true;
						// }else{
						// 	this.showLoadMore = false; 
						// }
					 // }
				 }
			},
			//关闭弹窗
			closeWd(){
				this.isShow=false
			},
			//复制粘贴
			copy(copy){
			  uni.setClipboardData({
			    data:copy,
			    success (res) {
			      uni.showToast({
			        title: '复制成功',
			        icon:"none"
			      })
			    }
			  })
			},
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index
					if(index==4){
						this.currentList=1
					}else if(index==1){
						this.currentList=0
					}else if(index==5){
						this.currentList=2
					}
					this.page=1
					this.list=[]
					// this.listOne=[]
					// this.listTwo=[]
					// this.listThree=[]
					this.newList(this.page)
				}
			},
			obj(objItem){
				this.objItem=objItem
				this.isShow=true
			}
		}
	}
</script>
